<template>
  <div class="table-list-container">
    <div class="title">
      <span>{{this.title}}</span>
      <span class="more" v-if="category.code" @click="onClickMore">查看更多</span>
    </div>
    <ul>
      <li v-for="item in data" :key="item.blogId" @click="onEnterToDetail(item.blogId)">
        <div class="right-info">
          <el-rate
                  v-model="item.blogRate"
                  disabled
                  style="display: inline-block;">
          </el-rate>
        </div>
        <div class="item-info">{{item.blogName}}</div>
      </li>
    </ul>
  </div>
</template>

<script>

// import { getNoticeList, createNotice, deleteNotice } from '../../api';

export default {
  name: 'TableList',
  components: {},
  props: {
    category: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
     
    };
  },
  computed: {
    
  },
  methods: {
    onClickMore() {
      this.$router.push({
        name: 'Blogs',
        query: {
          code: this.category.code,
          value: this.category.value
        }
      });
    },
    onEnterToDetail(blogId) {
      window.open(`${window.location.origin}/main/detail?blogId=${blogId}`);
    }
  },
  mounted() {
   
  },
  beforeDestroy() {
    
  },
}
</script>

<style lang="scss" scoped>
  .table-list-container {
    padding: 16px;
    background-color: #fff;
    border-radius: 5px;

    .title {
      font-size: 16px;
      font-weight: bold;      
      line-height: 40px;
      border-bottom: 1px solid #f0f0f0;
      span {
        display: inline-block;
        border-bottom: 2px solid #000;
      }
    }

    ul {
      padding-left: 20px;
    }

    li {
      line-height: 36px;
      font-size: 14px;
      border-bottom: 1px dashed #f0f0f0;
      list-style: disc;
    }

    li:last-child {
      border-bottom: 0;
    }

    .right-info {
      font-size: 14px;
      color: #595959;
      float: right;
    }

    .item-info {
      cursor: pointer;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      &:hover {
        color: #009a61;
        text-decoration: underline;
      }
    }

    .more {
      float: right;
      font-size: 14px;
      font-weight: normal;
      border-bottom: none !important;
      cursor: pointer;
    }

    .more:hover {
      color: #009a61;
    }
  }
</style>
